﻿<html>
<head>
    <script src="./luxon-1.24.1.js" type="text/javascript"></script>
    <script src="./chart-3.0.0-beta.9.js" type="text/javascript"></script>
    <script src="./chartjs-adapter-luxon-0.2.1.js" type="text/javascript"></script>
    <script src="./chartjs-chart-financial.js" type="text/javascript"></script>
    <script src="./hammer.js" type="text/javascript"></script>
    <script src="./chartjs-plugin-zoom.min.js" type="text/javascript"></script>
    <style>
        #chartcontainer {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-grow: 1;
        }

        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            width: 100% !important;
            height: 100% !important;
        }
    </style>
</head>
<body oncontextmenu="return false">
    <div id="chartcontainer">
        <canvas id="canvas"></canvas>
    </div>
    <script>
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.canvas.width = 1000;
        ctx.canvas.height = 250;

        function randomNumber(min, max) {
            return Math.random() * (max - min) + min;
        }

        function randomBar(date, lastClose) {
            var open = randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);
            var close = randomNumber(open * 0.95, open * 1.05).toFixed(2);
            var high = randomNumber(Math.max(open, close), Math.max(open, close) * 1.1).toFixed(2);
            var low = randomNumber(Math.min(open, close) * 0.9, Math.min(open, close)).toFixed(2);

            return {
                t: date.valueOf(),
                o: open,
                h: high,
                l: low,
                c: close
            };

        }

        function getRandomData(count) {
            var date = luxon.DateTime.fromRFC2822('01 Apr 2017 00:00 Z');
            var data = [randomBar(date, 30)];
            while (data.length < count) {
                date = date.plus({ days: 1 });
                if (date.weekday <= 5) {
                    data.push(randomBar(date, data[data.length - 1].c));
                }
            }
            return data;
        }

        var config = {
            type: 'candlestick',
            data: {
                datasets: []
            },
            options: {
                responsive: true,
                animation: {
                    duration: 0
                },
                hover: {
                    animationDuration: 0
                },
                responsiveAnimationDuration: 0,
                plugins: {
                    zoom: {
                        pan: {
                            enabled: true,
                            mode: 'xy',
                            overScaleMode: 'y'
                        },
                        zoom: {
                            wheel: {
                                enabled: true,
                            },
                            pinch: {
                                enabled: true,
                            },
                            mode: 'xy',
                            overScaleMode: 'y'
                        }
                    }
                }
            }
        };

        var chart = new Chart(ctx, config);

        function createChart(name, data) {
            var newDataset = {
                label: name,
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: data
            };

            if (chart.data.datasets.length > 0) chart.data.datasets.pop();

            chart.data.datasets.push(newDataset);

            chart.update();
        }

            //createChart("Test", getRandomData(100));
    </script>
</body>
</html>